導讀:A5創(chuàng )業(yè)項目春季招商 好項目招代理無(wú)憂(yōu)大多數時(shí)候,站長(cháng)在做網(wǎng)站都是奔著(zhù)網(wǎng)站外觀(guān)大方、功能齊全去的,不過(guò)有些站長(cháng)卻希望自己的網(wǎng)站能夠看上去更有趣、更具個(gè)性化色彩。手繪元
發(fā)表日期:2019-03-18
文章編輯:興田科技
瀏覽次數:12244
標簽:
A5創(chuàng )業(yè)項目春季招商 好項目招代理無(wú)憂(yōu)
大多數時(shí)候,站長(cháng)在做網(wǎng)站都是奔著(zhù)網(wǎng)站外觀(guān)大方、功能齊全去的,不過(guò)有些站長(cháng)卻希望自己的網(wǎng)站能夠看上去更有趣、更具個(gè)性化色彩。手繪元素就是在這個(gè)時(shí)候被引入進(jìn)網(wǎng)頁(yè)設計之中的,因為它可以用來(lái)增強網(wǎng)頁(yè)設計的吸引力,營(yíng)造輕松、和諧的氛圍,傳遞愉快、自由的情緒。近些年來(lái),手繪元素在網(wǎng)站中使用地越來(lái)越頻繁,差不多成了一種設計趨勢。那么在網(wǎng)頁(yè)設計中,手繪元素通常扮演什么樣的角色,又能起到哪些作用呢?今天小飛主要就這一主題展開(kāi)探究一下,希望大家看完之后對手繪元素有更加深刻的認識和理解。
1. 分隔區塊
不少站長(cháng)擔心在網(wǎng)站中使用手繪元素會(huì )破壞網(wǎng)站的整體和諧美感,其實(shí)手繪元素幾乎可以和各種視覺(jué)元素組合使用。它可以同圖片、視頻組合使用,可以給留白增加視覺(jué)焦點(diǎn),甚至可以出現在文本附近。也因此,設計師經(jīng)常使用手繪元素去分隔不同內容區塊或不同區域。這是因為,一方面,手繪元素本身?yè)碛胁诲e的融入感,放在網(wǎng)頁(yè)中不會(huì )顯得過(guò)于突兀。另一方面,手繪元素具有一定的個(gè)性化特征,不僅能讓區域之間界限分明,還能讓這分隔的留白不顯得單調。用手繪元素分割不同區塊有助于保持整個(gè)頁(yè)面設計的節奏感。
2. 服務(wù)于用戶(hù)交互
手繪元素還可以讓網(wǎng)站中的交互變得更加有趣。不管是將它作為加載動(dòng)畫(huà)還是網(wǎng)頁(yè)設計交互體驗的一部分(許多網(wǎng)站已經(jīng)開(kāi)始使用),手繪元素這種設計技巧能夠很好的引起用戶(hù)的興趣,發(fā)揮自己的優(yōu)勢。
Real Estate Stained Glass網(wǎng)站在運用手繪元素引起用戶(hù)互動(dòng)方面就很出色。當你登入這個(gè)網(wǎng)站,點(diǎn)擊開(kāi)始時(shí),用戶(hù)可以通過(guò)移動(dòng)鼠標給物體上色。盡管網(wǎng)頁(yè)上有很多手繪元素,但整個(gè)涂鴉的過(guò)程十分順暢,填充的顏色會(huì )適時(shí)出現在頁(yè)面中,這種沉浸式的體驗能夠起到維系用戶(hù)的作用。
3. 手繪字體
有時(shí)候最好用的手繪字體并不一定是手繪出來(lái)的。不少模仿手繪風(fēng)格的字體就很流行,它們尤其適用于展示性質(zhì)的網(wǎng)站。手繪字體或者說(shuō)手繪風(fēng)格的字體常常有更輕盈、更人性化的感覺(jué)(這是因為用戶(hù)易于帶入自己的情感)。當然,要想手繪字體能夠發(fā)揮出自己的積極作用,我們一定要保證它的可讀性,實(shí)現字體美感和可讀性之間的平衡。
Tradewinds Hotel網(wǎng)站的標題就挑選了一款簡(jiǎn)約的草書(shū)字體,字體足夠大,用戶(hù)容易辨認。其他位置使用的字體也是選用了簡(jiǎn)潔的無(wú)襯線(xiàn)樣式,與標題字體形成對比,不僅突出強調了手繪字體,還保證了良好的可讀性,便于用戶(hù)理解網(wǎng)站內容。
4. 強化視覺(jué)效果
上面說(shuō)的手繪元素在網(wǎng)頁(yè)中都起到了一定的功能性作用。但這還有一些手繪元素純粹是服務(wù)于用戶(hù)感官效果的。在網(wǎng)站中零星地點(diǎn)綴著(zhù)一些手繪元素,它們可以呈現其他方法難以實(shí)現的微妙、有趣的視覺(jué)效果。
Mother’s Brewing就是這樣做的。網(wǎng)站首頁(yè)上使用了巨大的手繪心型圖標;其他頁(yè)面中也有手繪元素的運用,一些很明顯,一些比較隱蔽;每個(gè)CTA按鈕都是手繪的絲帶樣式。背景上的元素和滑動(dòng)元素上重疊,填滿(mǎn)了網(wǎng)頁(yè)上沉寂的空白,手繪元素的使用讓整個(gè)網(wǎng)站在視覺(jué)上十分引人注意。
5. 營(yíng)造氛圍
手繪設計元素常常更加輕松、歡快。它們可以在幾乎任何網(wǎng)站中發(fā)揮自己的這種特點(diǎn),你在網(wǎng)站使用的手繪元素越多,網(wǎng)站會(huì )顯得越輕快,用戶(hù)在瀏覽時(shí)的情緒也不會(huì )太差。
Signs for Science網(wǎng)站就利用了手繪元素讓網(wǎng)站充滿(mǎn)童趣(當然,這種效果也要在一定程度上歸功于網(wǎng)站配色的應用)。不過(guò),從網(wǎng)站字體、圖標再到下劃線(xiàn),手繪元素讓整個(gè)網(wǎng)站保持了一致的基調,網(wǎng)站顯得創(chuàng )造力十足、足夠輕盈,這也更能鼓舞用戶(hù)與網(wǎng)站產(chǎn)生互動(dòng)。
6. 展示創(chuàng )意
手繪設計元素還可以用來(lái)展示網(wǎng)站的創(chuàng )意,這尤其適用設計師作品集的展示網(wǎng)站。這些手繪元素可以讓用戶(hù)集中了解設計師想法的產(chǎn)生,設計的具體過(guò)程。
The Feebles網(wǎng)站首頁(yè)上就使用了手繪元素,右圖展示了設計師的創(chuàng )作過(guò)程。除此以外,首頁(yè)左上方還有一個(gè)手繪Logo,十分俏皮。
7. 手繪圖標和Logo
手繪圖標和Logo可能是最受歡迎的手繪元素了,他們最具代表性的特點(diǎn)就是不對稱(chēng)、不規則。也正是這些細節上的差別讓它們極富個(gè)性,十分迷人。
從嚴格意義上來(lái)說(shuō),Higher Ground網(wǎng)站中的圖標算不上手繪Logo,但是其使用了襯線(xiàn)字體搭配波浪紋的裝飾,呈現出手繪Logo的特點(diǎn)。
8. 動(dòng)態(tài)手繪效果
在這個(gè)動(dòng)效大行其道的今天,手繪元素最終也難逃動(dòng)畫(huà)效果的"魔爪"。動(dòng)態(tài)的手繪元素,無(wú)疑擁有更強的娛樂(lè )趣味,在增強網(wǎng)站轉化率、延長(cháng)用戶(hù)停留時(shí)間上有其他設計元素所不可比擬的優(yōu)勢。
Long Story Short就在網(wǎng)頁(yè)設計上沿用了這樣的思路。網(wǎng)站Logo 使用了動(dòng)態(tài)的手繪字體,而且還借用快速的視頻播放,將它們其他品牌設計項目快速地展現出來(lái)。
看了這么多,相信大家對于手繪元素的用途已有了一定的了解。從排版設計到動(dòng)態(tài)效果,手繪元素的存在可以讓網(wǎng)頁(yè)設計變得更加賞心悅目、更具個(gè)性魅力、更有人情味。雖然手繪元素不一定適用于每個(gè)網(wǎng)站,但是不可否認,手繪元素是非常有效的一項網(wǎng)頁(yè)設計技巧,它可以適用于多種網(wǎng)站設計。趕緊來(lái)起飛頁(yè)自助建站平臺(http://www.qifeiye.com/?t_wd=a5)做一個(gè)網(wǎng)站,用用手繪元素吧!
<script>document.writeln('上一篇:
暫無(wú)信息更多新聞
2020
關(guān)于網(wǎng)站建設,一個(gè)與企業(yè)名稱(chēng)和形象相符的域名,是企業(yè)進(jìn)行網(wǎng)絡(luò )營(yíng)銷(xiāo)的前提。由于域名具有惟一性,一個(gè)域名一旦注冊成功,任何其他機構都無(wú)法注冊相同的域名
View details
2019
A5創(chuàng )業(yè)項目春季招商 好項目招代理無(wú)憂(yōu)為什么運營(yíng)要走向精細化?又該如何做?10年前,pc互聯(lián)網(wǎng)時(shí)代,當你瀏覽百度的網(wǎng)頁(yè),你會(huì )普遍看到各種插件推廣、彈窗廣告等等,這些彈窗就好似牛
View details
2020
關(guān)于網(wǎng)站建設,當搜索引擎的算法改變或者加強時(shí),導致一些網(wǎng)站的某些關(guān)鍵字排名消失,一些管理員就說(shuō)他們的網(wǎng)站消失了。實(shí)際上并非如此,在搜索引擎算法改變
View details
2020
關(guān)于網(wǎng)站建設,下面小編告訴大家怎樣來(lái)提高網(wǎng)站建設的權重? 1標題:確保網(wǎng)站每一個(gè)標題的唯一性也是網(wǎng)站優(yōu)化者必須注重的,只有唯一性才能給你的網(wǎng)站帶來(lái)
View details